<template>
  <div class="scroll_box" v-resize="resize">
    <div class="v_scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const w = ref(0);
const h = ref(0);
const resize = ({ width, height }) => {
  w.value = width;
  h.value = height;
};
</script>

<style lang="less" scoped>
.scroll_box {
  width: 100%;
  height: 100%;
  --w : calc(v-bind(w) * 1px);
  --h : calc(v-bind(h) * 1px);
  .v_scroll {
    width: var(--h);
    height: var(--w);
    position: relative;
    transform-origin: left top;
    transform: translateY(var(--h)) rotate(-90deg);
    overflow: hidden scroll;
    &::-webkit-scrollbar {
      display: none; 
    }
    .content{
        width: var(--w);
        height: var(--h);
        position: absolute;
        left: var(--h);
        transform-origin: left top;
        transform:rotate(90deg);
    }
  }
}
</style>
